<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>


    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
</head>
<body>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        layui.use('form', function(){
            var form = layui.form;


            //给表单赋值
            form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                "username": "贤心" // "name": "value"
                ,"sex": "女"
                ,"auth": 3
                ,"check[write]": true
                ,"open": false
                ,"desc": "我爱layui"
            });

//获取表单区域所有值
            var data1 = form.val("formTest");

            console.log(data1);
            // form.on('submit(*)', function(data){
            //     console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //     console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            //     console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //
            //     var data1 = form.val("formTest");
            //
            //     //console.log(data1);
            //     return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            //
            //
            //
            // });
            //各种基于事件的操作，下面会有进一步介绍






        });
    </script>
</body>
</html>